<script setup>
import { ref, onMounted } from 'vue'

// 模拟系统公告数据
const announcements = ref([
  { id: 1, title: '系统维护通知', content: '系统将于本周六进行例行维护，请各位用户提前做好准备。', date: '2023-10-15' },
  { id: 2, title: '校园物流新政策', content: '关于校园物流新政策的实施细则已发布，请各位用户及时查看。', date: '2023-10-10' },
  { id: 3, title: '保修流程优化', content: '为提高服务质量，我们对保修流程进行了优化，现在可以更便捷地提交保修申请。', date: '2023-10-05' }
])

// 模拟统计数据
const statistics = ref({
  pendingRepairs: 15,
  completedRepairs: 158,
  userCount: 256,
  repairRate: 92
})
</script>

<template>
  <div class="home-container">
    <h1>欢迎使用**系统</h1>
    
    <!-- 统计卡片 -->
    <div class="stat-cards">
      <el-card shadow="hover" class="stat-card">
        <template #header>
          <div class="card-header">
            <span>待处理保修</span>
            <el-icon><WarningFilled /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ statistics.pendingRepairs }}</div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card">
        <template #header>
          <div class="card-header">
            <span>已完成保修</span>
            <el-icon><Check /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ statistics.completedRepairs }}</div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card">
        <template #header>
          <div class="card-header">
            <span>系统用户总数</span>
            <el-icon><User /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ statistics.userCount }}</div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card">
        <template #header>
          <div class="card-header">
            <span>保修处理率</span>
            <el-icon><DataAnalysis /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ statistics.repairRate }}%</div>
      </el-card>
    </div>
    
    <!-- 系统公告 -->
    <div class="announcement-section">
      <h2>系统公告</h2>
      <el-card class="announcement-card" v-for="item in announcements" :key="item.id">
        <div class="announcement-header">
          <h3>{{ item.title }}</h3>
          <span class="announcement-date">{{ item.date }}</span>
        </div>
        <p>{{ item.content }}</p>
      </el-card>
    </div>
    
    <!-- 操作指南 -->
    <div class="guide-section">
      <h2>操作指南</h2>
      <el-steps :active="4" finish-status="success">
        <el-step title="注册登录" description="注册账号并登录系统" />
        <el-step title="填写信息" description="填写保修所需信息" />
        <el-step title="提交申请" description="提交保修申请" />
        <el-step title="进度查询" description="在个人中心查询保修进度" />
      </el-steps>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  padding: 20px;
}

h1 {
  margin-bottom: 30px;
  font-size: 24px;
  text-align: center;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
}

.announcement-section, .guide-section {
  margin-top: 30px;
}

h2 {
  margin-bottom: 20px;
  font-size: 20px;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.announcement-card {
  margin-bottom: 15px;
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.announcement-header h3 {
  margin: 0;
  font-size: 16px;
}

.announcement-date {
  color: #999;
  font-size: 12px;
}

.guide-section {
  margin-top: 40px;
  margin-bottom: 40px;
}
</style> 